<script setup>
import { ref, onMounted } from 'vue'
import { getScenicSpotList } from '@/api/scenicSpot'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'

const router = useRouter()
const scenicSpots = ref([])
const loading = ref(false)

const loadScenicSpots = async () => {
  try {
    loading.value = true
    const res = await getScenicSpotList()
    scenicSpots.value = res.data
  } catch (error) {
    showToast('加载失败')
  } finally {
    loading.value = false
  }
}

const goToDetail = (id) => {
  router.push(`/scenic/${id}`)
}
const handleBack = ()=>{
    router.push('/')
}
onMounted(() => {
  loadScenicSpots()
})
</script>

<template>
  <div class="scenic-list">
    <van-nav-bar title="景区列表" left-arrow @click-left="handleBack" />
    
    <div class="content">
      <van-skeleton title avatar :row="3" :loading="loading" v-for="i in 3" :key="i" v-if="loading">
      </van-skeleton>
      
      <van-swipe-cell v-for="spot in scenicSpots" :key="spot.id" >
        <div class="scenic-item" @click="goToDetail(spot.id)">
          <div class="scenic-image">
            <img :src="spot.images" :alt="spot.scenicSpotName">
            <div class="tag">{{ spot.tag }}</div>
          </div>
          <div class="scenic-info">
            <h3>{{ spot.scenicSpotName }}</h3>
            <p class="description">{{ spot.description }}</p>
            <div class="details">
              <span class="time">
                <van-icon name="clock-o" />
                {{ spot.startTime.split(' ')[1].slice(0, 5) }} - {{ spot.endTime.split(' ')[1].slice(0, 5) }}
              </span>
              <span class="location">
                <van-icon name="location-o" />
                {{ spot.position }}
              </span>
            </div>
          </div>
        </div>
      </van-swipe-cell>
    </div>
  </div>
</template>

<style scoped lang="scss">
.scenic-list {
  min-height: 100vh;
  background: #f8f8f8;

  .content {
    padding: 16px;
  }

  .scenic-item {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(0);
    transition: all 0.3s;

    &:active {
      transform: translateY(2px);
    }

    .scenic-image {
      position: relative;
      height: 200px;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s;
      }

      .tag {
        position: absolute;
        top: 12px;
        right: 12px;
        background: rgba(0, 0, 0, 0.6);
        color: #fff;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
      }
    }

    .scenic-info {
      padding: 16px;

      h3 {
        margin: 0 0 8px;
        font-size: 18px;
        color: #333;
      }

      .description {
        color: #666;
        font-size: 14px;
        margin-bottom: 12px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .details {
        display: flex;
        font-size: 12px;
        color: #999;
        gap: 16px;

        .van-icon {
          margin-right: 4px;
          vertical-align: -2px;
        }
      }
    }
  }
}
</style> 